const os = require('os');
const ESLintWebpackPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path'); // nodejs 核心模块，专门用来处理路径问题

const threads = os.cpus().length; // cpu 核数

module.exports = {
    // 入口
    entry: './src/main.js',
    // 输出
    output: {
        // 所有文件的输出路径
        // 开发模式没有输出
        path: undefined,
        // 入口文件打包输出的文件名
        filename: 'static/js/main.js',
    },
    // 加载器
    module: {
        rules: [
            // loader 的配置
            {
                // 每个文件只能被其中一个 loader 配置处理
                oneOf: [
                    {
                        test: /\.css$/, // 只检测 .css 文件
                        use: [
                            //执行顺序：从右到左（从下到上）
                            'style-loader', //将js中css通过创建style标签添加到html文件中生效
                            'css-loader', //将css资源编译成commonjs的模块到js中
                        ],
                    },
                    {
                        test: /\.less$/,
                        // loader: 'xxx' 只能使用一个 loader
                        use: [
                            // 使用多个loader
                            'style-loader',
                            'css-loader',
                            'less-loader', //将less编译成css
                        ],
                    },
                    {
                        test: /\.s[ac]ss$/,
                        // loader: 'xxx' 只能使用一个 loader
                        use: [
                            // 使用多个loader
                            'style-loader',
                            'css-loader',
                            'sass-loader', //将sass编译成css
                        ],
                    },
                    {
                        test: /\.styl$/,
                        use: [
                            // 使用多个loader
                            'style-loader',
                            'css-loader',
                            'stylus-loader', //将stylus编译成css
                        ],
                    },
                    {
                        test: /\.(png|jpe?g|gif|webp|svg)$/,
                        type: 'asset',
                        parser: {
                            dataUrlCondition: {
                                // 小于 10 kb 的图片转base64
                                // 优点：减少请求数量   缺点：体积会更大
                                maxSize: 10 * 1024, //10kb
                            },
                        },
                        generator: {
                            // 输出图片名称
                            // [hash:10] hash取值前10位
                            filename: 'static/images/[hash:10][ext][query]',
                        },
                    },
                    {
                        test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
                        type: 'asset/resource',
                        generator: {
                            // 输出名称
                            filename: 'static/media/[hash:10][ext][query]',
                        },
                    },
                    {
                        test: /\.js$/,
                        // exclude: /node_modules/, // 排除 node_modules 中的 js 文件（这些文件不处理）
                        include: path.resolve(__dirname, '../src'), // 只处理 src 下的文件，其他文件不处理
                        use: [
                            {
                                loader: 'thread-loader', // 开启多进程
                                options: {
                                    works: threads, // 进程数量
                                },
                            },
                            {
                                loader: 'babel-loader',
                                options: {
                                    // presets: ['@babel/preset-env'],
                                    cacheDirectory: true, // 开启 babel 缓存
                                    cacheCompression: false, // 关闭缓存文件压缩
                                    plugins: [
                                        '@babel/plugin-transform-runtime', //减少代码体积
                                    ],
                                },
                            },
                        ],
                    },
                ],
            },
        ],
    },
    // 插件
    plugins: [
        // plugin 的配置
        new ESLintWebpackPlugin({
            // 检测哪些文件
            context: path.resolve(__dirname, '../src'),
            exclude: 'node_modules', // 默认值
            threads, // 开启多进程和设置进程数量
        }),
        new HtmlWebpackPlugin({
            // 模板：以 public/index.html 文件创建新的 html 文件
            // 新的文件特点：1. 结构和原来一致 2.自动引入打包输出的资源
            template: path.resolve(__dirname, '../public/index.html'),
        }),
    ],
    // 开发服务器:不会输出资源  在内存中编译打包的
    devServer: {
        host: 'localhost', // 启动服务器域名
        port: '3000', // 启动服务器端口号
        open: true, // 是否自动打开浏览器
        hot: true, // 开启 HMR（默认值）
    },
    // 模式
    mode: 'development',
    devtool: 'cheap-module-source-map',
};
